<!--店铺列表-->
<style scoped>
.vux-cell-box {
  position: absolute !important;
}

.weui-cell__ft {
  display: none;
}

.vux-cell-primary {
  display: none !important;
}

.weui-cell__hd {
  margin-left: 40%;
}

.thought-icon {
  height: 20px;
  vertical-align: middle
}

._v-container {
  position: relative !important;
}

.store-div {
  height: 150px;
  margin: 5px;
  border: 1px #CCCCCC solid;
}

</style>
<template>
  <div>
    <div>
      <grid :rows="2">
        <grid-item>
          <span class="grid-center" @click="showAreaPick">区域</span>
        </grid-item>
        <grid-item>
          <span class="grid-center" @click="showClassPick">品类</span>
        </grid-item>
      </grid>
      <popup-picker :show.sync="areaPicker" :data="areaList" :columns="2" v-model="selectArea" ref="picker3" @on-hide="onHide"></popup-picker>
      <popup-picker :show.sync="classPicker" :data="classList" :columns="1" v-model="selectClass" ref="picker4" @on-hide="onHide"></popup-picker>
    </div>
    <div>
      <scroller :on-refresh="refresh" :on-infinite="loadMore" height="530" ref="myscroller">
        <div v-for="item in data" class="store-div" @click="showStoreThoughts(item.id)">
          <img :src="item.image" height="120px" width="100%"></img>
          <div style="margin-top: -3px;">
            <flexbox>
              <flexbox-item :span="3/5">
                <div class="flex-demo">
                  <span style="margin-left: 10px;">{{item.storeName}}</span>
                </div>
              </flexbox-item>
              <flexbox-item :span="1/5">
                <div class="flex-demo">{{item.area}}</div>
              </flexbox-item>
              <flexbox-item :span="1/5">
                <div class="flex-demo">{{item.thoughtCount}}
                  <img class="thought-icon" src="../../static/img/thought.png"></img>
                </div>
              </flexbox-item>
            </flexbox>
          </div>
        </div>
      </scroller>
    </div>
  </div>
</template>
<script>
import { Flexbox, FlexboxItem, PopupPicker, XButton, Grid, GridItem, GroupTitle } from 'vux'

export default {
  components: {
    Flexbox,
    FlexboxItem,
    PopupPicker,
    XButton,
    Grid,
    GridItem,
    GroupTitle
  },
  data() {
    return {
      userId: window.localStorage["userId"],
      areaPicker: false,
      classPicker: false,
      areaList: [],
      classList: [],
      selectArea: ["不限", "全部"],
      selectClass: ["0"],
      searchContent: this.$route.query.searchContent,
      cityName: this.$route.query.cityName,
      data: [],
      pageNo: 1,
      tip: '加载中'
    }
  },
  created() {
    setTimeout(() => {
      this.getArea()
      this.getClass()
    }, 2000)
  },
  methods: {
    showStoreThoughts(storeId) {
      this.$router.push({
        path: '/tourl/storeThoughts',
        query: {
          storeId: storeId
        }
      })
    },
    refresh() {
      setTimeout(() => {
        this.pageNo = 1
        this.data = []
        this.load()
        this.$refs.myscroller.finishPullToRefresh()
      }, 500)
    },
    loadMore() {
      //为了出现加载动作
      setTimeout(() => {
        this.load()
      }, 500)
    },
    load() {
      let _that = this;
      this.$tldAjax({
        isLayer: false,
        url: this.$domain + "/tld/admin/storel/queryData.json",
        params: {
          userId: this.userId,
          cityName: this.cityName,
          searchContent: this.searchContent,
          area: this.selectArea[0],
          district: this.selectArea[1],
          storeType: this.selectClass[0],
          pageNo: this.pageNo
        },
        successFc: (response) => {
          if (response.data.data == null) {
            _that.$refs.myscroller.finishInfinite(0);
            return;
          }
          if (response.data.data) {
            response.data.data.forEach(function(o) { //分别对应：数组元素，元素的索引，数组本身
              _that.data.push(o)
            })
          }
          _that.$refs.myscroller.finishInfinite(1);
        }
      });
      this.pageNo++;
    },
    showAreaPick() {
      this.areaPicker = true
    },
    showClassPick() {
      this.classPicker = true
    },
    onHide(type) {
      this.areaPicker = false
      this.classPicker = false
      if (type) {
        //点击确定 查询数据
        this.refresh()
      }
    },
    getArea() {
      this.$tldAjax({
        isLayer: false,
        url: this.$domain + "/tld/pub/common/getAreaList.json",
        params: {
          cityName: this.cityName
        },
        successFc: (response) => {
          this.areaList = response.data.data
        }
      });
    },
    getClass() {
      this.$tldAjax({
        isLayer: false,
        url: this.$domain + "/tld/pub/common/getStoreTypeLinkageVo.json",
        params: {

        },
        successFc: (response) => {
          this.classList = response.data.data
        }
      });
    }
  }
}

</script>
